<template>
  <div class="custom-card">
    <div class="card-header">
      <span>关于我们</span>
    </div>

    <div class="card-content">
      <h3>Vue 3 + TypeScript + Element Plus 登录示例</h3>
      <p>这是一个演示 Vue Router 路由功能的示例项目，包含以下特性：</p>

      <ul>
        <li>1. 用户登录和身份验证</li>
        <li>2. 路由导航和参数传递</li>
        <li>3. 路由守卫（权限控制）</li>
        <li>4. 动态路由组件</li>
        <li>5. 页面间的数据传递</li>
      </ul>

      <div style="margin-top: 20px;">
        <el-tag type="success">Vue 3</el-tag>
        <el-tag type="primary" style="margin-left: 10px;">TypeScript</el-tag>
        <el-tag type="warning" style="margin-left: 10px;">Element Plus</el-tag>
        <el-tag type="danger" style="margin-left: 10px;">Vue Router</el-tag>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.custom-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 20px;
}

ul {
  padding-left: 20px;
}

ul li {
  margin: 10px 0;
}
</style>
